<template>
  <div>
    <el-input-number v-model="number"/>
    <el-date-picker type="daterange" size="small"/>
    <div class="el-date-editor el-date-editor--daterange el-range-editor el-input__inner el-range-editor--small" style="width: 350px;">
      <el-input v-model="fromNum" @change="handleFromChange" size="small" placeholder="最小值"></el-input>
      <span class="el-range-separator el-range-editor--small">至</span>
      <el-input v-model="toNum" @change="handleToChange" size="small" placeholder="最大值"></el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestFormComp',
  props: {
    size: {
      type: String,
      default () {
        return 'small'
      }
    }
  },
  data () {
    return {
      number: 0,
      fromNum: null,
      toNum: null
    }
  },
  methods: {
    handleFromChange (value) {
      let num = value === '' ? null : Number(value)
      if (isNaN(num)) {
        num = null
      }
      this.fromNum = num
      console.log(this.fromNum)
    },
    handleToChange (value) {
      let num = value === '' ? null : Number(value)
      if (isNaN(num)) {
        num = null
      }
      this.toNum = num
      console.log(this.toNum)
    }
  }
}
</script>

<style scoped>

.tb-input-number-range {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 350px;
}

.separator-box {
  line-height: 24px;
  font-size: 13px;
}

::v-deep .el-input .el-input__inner {
  border: 0;
  margin: 0;
  padding: 0 15px;
  background-color: transparent;
}

.flex-box {
  display: flex;
}
</style>
